<template>
  <div
    class="echart"
    ref="Echarts"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, type PropType } from 'vue'
import { AxisData } from '@/api/home/type'
import { useEcharts } from '@/hooks/echarts'

let Echarts = ref<HTMLElement | null>(null)
const windDirections = [0, 45, 90, 135, 180, 225, 270, 315, 112, 254] // 单位：度
const props = defineProps({
  xAxisData: {
    type: Array as PropType<(string | number)[]>,
    default: () => ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月']
  },
  yAxisData: {
    type: Array as PropType<AxisData[]>,
    default: () => [
      {
        name: '浓度',
        data: [10, 20, 15, 11, 23, 66, 54, 21]
      },
      {
        name: '温度',
        data: [55, 24, 65, 27, 84, 31, 22, 44]
      },
      {
        name: '湿度',
        data: [12, 25, 25, 28, 34, 75, 41, 61]
      },
      {
        name: '风速',
        data: [85, 34, 65, 21, 74, 52, 12, 22]
      },
      {
        name: '气压',
        data: [44, 25, 38, 14, 16, 86, 51, 36]
      }
    ]
  },
  lengedShow: {
    type: Boolean,
    default: true
  },
  toolboxShow: {
    type: Boolean,
    default: true
  }
})
const windowWidth = ref(window.innerWidth)

const deviceRatio = computed(() => windowWidth.value / 1920)
const option = computed(() => {
  return {
    title: {
      text: '方位1气体与气象条件时间序列变化图',
      left: 'center',
      top: 10,
      textStyle: {
        fontSize: 16 * deviceRatio.value
      }
    },
    tooltip: {
      trigger: 'axis',
      textStyle: {
        fontSize: 14 * deviceRatio.value
      }
    },
    grid: [
      { left: 60, right: 40 * (props.yAxisData.length - 1), top: '10%', height: '20%' }, // 风向箭头行
      { left: 60, right: 40 * (props.yAxisData.length - 1), top: '30%', height: '60%' } // 第一行
    ],
    legend: {
      show: props.lengedShow,
      //   textStyle: {
      //     color: '#fff'
      //   },
      top: 40,
      textStyle: {
        fontSize: 12 * deviceRatio.value
      },
      itemWidth: 25 * deviceRatio.value,
      itemHeight: 14 * deviceRatio.value
    },
    toolbox: {
      show: props.toolboxShow,
      right: 20,
      feature: {
        magicType: {
          type: ['line', 'bar'],
          title: {
            line: '折线图',
            bar: '柱状图'
          }
        }
      }
      //   iconStyle: {
      //     color: '#fff'
      //   }
    },
    xAxis: [
      {
        type: 'category',
        data: props.xAxisData,
        boundaryGap: false,
        gridIndex: 0,
        axisLine: {
          show: true // 显示坐标轴线
          // lineStyle: {
          //   color: '#ccc' // 坐标轴线颜色为黑色
          // }
        },
        axisLabel: { show: false },
        axisTick: {
          show: false // 去掉刻度线
        }
      },
      {
        type: 'category',
        data: props.xAxisData,
        boundaryGap: false,
        gridIndex: 1,
        axisLine: {
          show: true // 显示坐标轴线
          // lineStyle: {
          //   color: '#ccc' // 坐标轴线颜色为黑色
          // }
        },
        axisTick: {
          show: true // 去掉刻度线
        },
        axisLabel: {
          fontSize: 12 * deviceRatio.value
        }
      }
    ],
    yAxis: [
      // 风向箭头y轴（隐藏）
      {
        type: 'value',
        gridIndex: 0,
        min: 0,
        max: 1,
        splitLine: { show: false },
        axisLabel: { show: false, fontSize: 12 * deviceRatio.value },
        axisLine: { show: false },
        axisTick: { show: false }
      },
      ...props.yAxisData.map((item, idx) => ({
        type: 'value',
        name: item.name,
        nameTextStyle: {
          fontSize: 12 * deviceRatio.value
        },
        gridIndex: 1,
        position: idx === 0 ? 'left' : 'right',
        offset: idx > 1 ? 40 * (idx - 1) : 0, // 多于2个y轴时错开
        splitNumber: 5,
        axisLine: {
          show: true
          // lineStyle: { color: '#ccc' }
        },
        splitLine: { show: false },
        axisTick: {
          show: true // 去掉刻度线 false
        },
        axisLabel: { show: true, fontSize: 12 * deviceRatio.value }
      }))
    ],
    series: [
      // 风向箭头 custom series
      {
        type: 'custom',
        name: '风向',
        xAxisIndex: 0,
        yAxisIndex: 0,
        renderItem: function (params: any, api: any) {
          const idx = params.dataIndex
          const direction = api.value(1)
          const coord = api.coord([idx, 0.5])
          // 箭头SVG路径
          const arrowPath = 'M0,-10 L4,0 L0,-5 L-4,0 Z'
          return {
            type: 'path',
            shape: {
              pathData: arrowPath
            },
            x: coord[0],
            y: coord[1],
            rotation: (direction * Math.PI) / 180,
            style: {
              fill: '#000',
              stroke: '#000',
              lineWidth: 1
            }
          }
        },
        data: props.xAxisData.map((dir, i) => [dir, windDirections[i]]),
        // data: windDirections.map((dir, i) => [i, dir]),
        z: 10
      },
      ...getSeries()
    ]
  }
})

const { initChart, setOption } = useEcharts(option)

function getSeries() {
  return props.yAxisData.map((item, idx) => {
    return {
      name: item.name,
      data: item.data,
      type: 'line',
      xAxisIndex: 1,
      yAxisIndex: idx + 1,
      smooth: true
    }
  })
}

onMounted(() => {
  initChart(Echarts.value)
  window.addEventListener('resize', screenAdapter)
})

onUnmounted(() => {
  window.removeEventListener('resize', screenAdapter)
})

function screenAdapter() {
  windowWidth.value = window.innerWidth
}

defineExpose({
  setOption
})
</script>

<style scoped lang="scss">
.echart {
  height: 100%;
  width: 100%;
  canvas {
    height: 100%;
    width: 100%;
  }
}
</style>
